{% extends 'base.html' %}
{% block content %}
<div class="card shadow-sm p-4">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h3>All Categories</h3>
    <a href="{% url 'create_category' %}" class="btn btn-primary">➕ Add Category</a>
  </div>

  <table class="table table-striped table-bordered">
    <thead class="table-dark">
      <tr>
        <th>#</th>
        <th>Category Name</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for cat in categories %}
      <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ cat.name }}</td>
        <td>
          <a href="{% url 'update_category' cat.id %}" class="btn btn-warning btn-sm">Edit</a>
          <a href="{% url 'delete_category' cat.id %}" class="btn btn-danger btn-sm"
             onclick="return confirm('Are you sure you want to delete this category?');">
            Delete
          </a>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="3" class="text-center text-muted">No categories available.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}